<m-card>
  <ng-container card-head>
    <div class="d-flex justify-content-between align-items-center w-100">
      <span class="g-card-title">软件信息</span>
      <div>
        <button class="btn btn-secondary mr-3" (click)="cancel.emit()">取消</button>
        <button class="btn btn-primary" (click)="submit()">保存</button>
      </div>
    </div>
  </ng-container>
  <div class="d-flex">
    <form
      class="form-inline was-validation align-items-start w-100"
      #formRef
      [class.submitted]="form.submitted"
    >
      <input type="hidden" name="id" ngModel />
      <div class="pr-3 mt-3">
        <m-image-preview class="preview" [control]="input" [src]="soft.icon" [radius]="'50%'">
          <input type="file" accept="image/*" name="icon" #input hidden ngModel />
        </m-image-preview>
      </div>
      <div class="info">
        <div class="head row">
          <div class="form-group col-6 col-lg-3 required">
            <label for="soft-name">软件名称：</label>
            <input
              type="text"
              name="name"
              class="form-control form-control-sm"
              id="soft-name"
              maxlength="10"
              ngModel
              required
            />
          </div>
          <div class="col-6 col-lg-3">更新时间：{{ soft.upgrade_at | date }}</div>
        </div>
        <hr />
        <div class="body row">
          <div class="form-group col-6 col-lg-4 required">
            <label for="soft-type">软件类别：</label>
            <select id="soft-type" name="stype" class="form-control form-control-sm " ngModel>
              <option *ngFor="let category of category$ | async" [value]="category.id">
                {{ category.name }}
              </option>
            </select>
          </div>
          <div class="col-6 col-lg-4">软件包名：{{ soft.package_name }}</div>
          <div class="col-6 col-lg-4">软件大小：{{ soft.size_format }}</div>
          <div class="col-6 col-lg-4">软件架构：{{ soft.architecture }}</div>
          <div class="form-group col-12">
            <label for="soft-remark">软件备注：</label>
            <input id="soft-remark" name="remark" class="form-control form-control-sm " ngModel />
          </div>
        </div>
      </div>
    </form>
  </div>
</m-card>
